<template>
  <div class="container-page-address-add">
    <div class="group-info">
      <div class="group-item">
        <div>收货人</div>
        <input v-model="fromData.username" type="text" placeholder="姓名">
      </div>
      <div class="group-item">
        <div>手机号</div>
        <input v-model="fromData.mobile" type="text" placeholder="收货人手机号">
      </div>
      <div class="group-item">
        <div>所在省</div>
        <div>
          <img v-if="!locationText.province_name" src="@/assets/address-icon.png" @click="show_province_code = true">
          <div v-else @click="show_province_code = true">{{ locationText.province_name }}</div>
        </div>
      </div>
      <div class="group-item">
        <div>所在市</div>
        <div>
          <img v-if="!locationText.city_name" src="@/assets/address-icon.png" @click="show_city_code = true">
          <div v-else @click="show_city_code = true">{{ locationText.city_name }}</div>
        </div>
      </div>
      <div class="group-item">
        <div>所在区</div>
        <div>
          <img v-if="!locationText.area_name" src="@/assets/address-icon.png" @click="show_area_code = true">
          <div v-else @click="show_area_code = true">{{ locationText.area_name }}</div>
        </div>
      </div>
      <div class="group-item detail">
        <div>详细地址</div> <br>
        <input v-model="fromData.address" type="text" placeholder="街道门牌信息">
      </div>
    </div>
    <div class="check">
      <van-checkbox v-model="is_default" checked-color="#D63A54">设为默认</van-checkbox>
    </div>
    <div class="add_btn" @click="submitHandler">确定</div>

    <!-- 选择省picker -->
    <van-popup v-model="show_province_code" position="bottom">
      <van-picker show-toolbar value-key="name" :columns="list_province_code" @confirm="onConfirm_province" />
    </van-popup>
    <!-- 选择市picker -->
    <van-popup v-model="show_city_code" position="bottom">
      <van-picker show-toolbar value-key="name" :columns="list_city_code" @confirm="onConfirm_city" />
    </van-popup>
    <!-- 选择区picker -->
    <van-popup v-model="show_area_code" position="bottom">
      <van-picker show-toolbar value-key="name" :columns="list_area_code" @confirm="onConfirm_area" />
    </van-popup>

  </div>
</template>

<script>
// api
import {
  userAddressLocation,
  userAddressCreate,
  userAddressEdit
} from '@/api/miva'
// item
import { Toast } from 'vant'
export default {
  data() {
    return {
      list_province_code: [],
      list_city_code: [],
      list_area_code: [],
      show_province_code: false,
      show_city_code: false,
      show_area_code: false,
      locationText: {
        province_name: '',
        city_name: '',
        area_name: ''
      },
      fromData: {
        username: '',
        mobile: '',
        province_code: '',
        city_code: '',
        area_code: '',
        address: '',
        is_default: 0
      },
      is_default: false
    }
  },
  watch: {
    is_default(val) {
      this.fromData.is_default = val ? 0 : 1
    }
  },
  async mounted() {
    // 获取路由params
    await this.getRouteParams()
    // 获取省
    await this.getAddressListProvince()
  },
  methods: {
    // 获取路由params
    async getRouteParams() {
      const { params } = this.$route
      // 写入提交用的fromData
      for (const key in this.fromData) {
        this.fromData[key] = params[key] || ''
      }
      // 写入显示用的locationText
      for (const key in this.locationText) {
        this.locationText[key] = params[key] || ''
      }
      // 修正默认选择
      this.is_default = params.is_default === 0
    },
    // 获取省
    async getAddressListProvince() {
      const list_province_code = await userAddressLocation({ type: 1 })
      this.list_province_code = list_province_code.data
    },
    // 获取市
    async getAddressListCity(code) {
      const list_city_code = await userAddressLocation({ type: 2, code })
      this.list_city_code = list_city_code.data
    },
    // 获取区
    async getAddressListArea(code) {
      const list_area_code = await userAddressLocation({ type: 3, code })
      this.list_area_code = list_area_code.data
    },
    // 选择省
    async onConfirm_province(evt) {
      this.show_province_code = false
      this.locationText.province_name = evt.name
      this.fromData.province_code = evt.code
      this.fromData.city_code = ''
      this.fromData.area_code = ''
      this.locationText.city_name = ''
      this.locationText.area_name = ''
      await this.getAddressListCity(evt.code)
    },
    // 选择市
    async onConfirm_city(evt) {
      this.show_city_code = false
      this.locationText.city_name = evt.name
      this.fromData.city_code = evt.code
      this.fromData.area_code = ''
      this.locationText.area_name = ''
      await this.getAddressListArea(evt.code)
    },
    // 选择区
    async onConfirm_area(evt) {
      this.show_area_code = false
      this.locationText.area_name = evt.name
      this.fromData.area_code = evt.code
    },
    // 提交处理器
    async submitHandler() {
      console.log(this.fromData)
      const { id } = this.$route.params
      for (const key in this.fromData) {
        if (this.fromData[key] === '') {
          return Toast('所有都为必填项' + key)
        }
      }
      if (id) {
        await userAddressEdit({ id, data: this.fromData })
        Toast('收货地址修改成功！')
      } else {
        await userAddressCreate(this.fromData)
        Toast('收货地址添加成功！')
      }
      this.$router.back()
    }
  }
}
</script>

<style lang="less">
.container-page-address-add {
  padding: 10px;
  .group-info {
    * {
      white-space: nowrap;
    }
    .group-item {
      padding: 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      background: #fff;
      input {
        width: 100%;
        border: 0;
        text-align: right;
      }
    }
    .detail {
      display: block;
      padding-bottom: 40px;
      input {
        text-align: left;
      }
    }
  }
  .check {
    padding: 30px;
    display: flex;
    justify-content: center;
  }
  .add_btn {
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background-color: #d63a54;
    color: #fff;
  }
}
</style>
